<template>
    <!-- 行政门户 -->
    <div>

       <div style="margin: 0px;padding: 0px">
            <el-row :gutter="20">
                <el-col :span="16">
                    <div class="grid-content bg-purple" id="te1" style="width: 100%;">
                       <img style="width: 100%;height: 150px;" src="../../assets/img/administration/1.png" alt="">

                         <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
                            <el-tab-pane label="行政审批" name="first">
                                <el-table :data="tableData"  :cell-style="{'text-align':'center'}" :header-cell-style="{'text-align':'center','height':'70px'}" stripe style="width: 100%;">
                                    <el-table-column prop="name"  label="会议名称" width="180" ></el-table-column>
                                    <el-table-column prop="id" label="会议类型" width="180"></el-table-column>
                                    <el-table-column prop="price" label="会议室"></el-table-column>
                                    <el-table-column prop="manager" label="召集人"></el-table-column>
                                    <el-table-column prop="collection" label="已收款"></el-table-column>
                                    <el-table-column prop="make" label="开始日期"></el-table-column>
                                    <el-table-column prop="time" label="结束日期"></el-table-column>
                                </el-table>
                            </el-tab-pane>
                            <el-tab-pane label="会议审批" name="second">
                                <el-table :data="tableData1"  :cell-style="{'text-align':'center'}" :header-cell-style="{'text-align':'center','height':'70px'}" stripe style="width: 100%;">
                                    <el-table-column prop="name"  label="会议名称" width="180" ></el-table-column>
                                    <el-table-column prop="id" label="会议类型" width="180"></el-table-column>
                                    <el-table-column prop="price" label="会议室"></el-table-column>
                                    <el-table-column prop="manager" label="召集人"></el-table-column>
                                    <el-table-column prop="collection" label="已收款"></el-table-column>
                                    <el-table-column prop="make" label="开始日期"></el-table-column>
                                    <el-table-column prop="time" label="结束日期"></el-table-column>
                                </el-table>
                            </el-tab-pane>
                            <el-tab-pane label="用车审批" name="third">
                                <el-table :data="tableData2"  :cell-style="{'text-align':'center'}" :header-cell-style="{'text-align':'center','height':'70px'}" stripe style="width: 100%;">
                                    <el-table-column prop="name"  label="会议名称" width="180" ></el-table-column>
                                    <el-table-column prop="id" label="会议类型" width="180"></el-table-column>
                                    <el-table-column prop="price" label="会议室"></el-table-column>
                                    <el-table-column prop="manager" label="召集人"></el-table-column>
                                    <el-table-column prop="collection" label="已收款"></el-table-column>
                                    <el-table-column prop="make" label="开始日期"></el-table-column>
                                    <el-table-column prop="time" label="结束日期"></el-table-column>
                                </el-table>
                            </el-tab-pane>
                            <el-tab-pane label="接待审批" name="five">
                                <el-table :data="tableData3"  :cell-style="{'text-align':'center'}" :header-cell-style="{'text-align':'center','height':'70px'}" stripe style="width: 100%;">
                                    <el-table-column prop="name"  label="会议名称" width="180" ></el-table-column>
                                    <el-table-column prop="id" label="会议类型" width="180"></el-table-column>
                                    <el-table-column prop="price" label="会议室"></el-table-column>
                                    <el-table-column prop="manager" label="召集人"></el-table-column>
                                    <el-table-column prop="collection" label="已收款"></el-table-column>
                                    <el-table-column prop="make" label="开始日期"></el-table-column>
                                    <el-table-column prop="time" label="结束日期"></el-table-column>
                                </el-table>
                            </el-tab-pane>
                            <el-tab-pane label="用餐审批" name="seze">
                                <el-table :data="tableData4"  :cell-style="{'text-align':'center'}" :header-cell-style="{'text-align':'center','height':'70px'}" stripe style="width: 100%;">
                                    <el-table-column prop="name"  label="会议名称" width="180" ></el-table-column>
                                    <el-table-column prop="id" label="会议类型" width="180"></el-table-column>
                                    <el-table-column prop="price" label="会议室"></el-table-column>
                                    <el-table-column prop="manager" label="召集人"></el-table-column>
                                    <el-table-column prop="collection" label="已收款"></el-table-column>
                                    <el-table-column prop="make" label="开始日期"></el-table-column>
                                    <el-table-column prop="time" label="结束日期"></el-table-column>
                                </el-table>
                            </el-tab-pane>
                        </el-tabs>
                    </div>

                </el-col>
                <el-col :span="8">

                    <div class="grid-content bg-purple" id="te2" style="width: 100%;">
                      <img class="imgtop2" src="../../assets/img/administration/2.png" alt="">
                      <div class="licenter">
                        <div class="licenternei">
                            <img src="../../assets/img/administration/3.png" alt="">
                            <div class="dd">
                                <div>空闲情况</div>
                                <div>1</div>
                                <div>空闲会议室</div>
                            </div>
                            <div class="youd">
                                <div>7</div>
                                <div>空闲用车</div>
                            </div>
                        </div>
                        <div class="licenternei">
                            <img src="../../assets/img/administration/4.png" alt="">
                            <div class="dd">
                                <div>资产情况</div>
                                <div>685.14万元</div>
                                <div>固定资产总额</div>
                            </div>
                            <div class="youd">
                                <div>23</div>
                                <div>活动数量</div>
                            </div>
                        </div>
                        <div class="licenternei">
                            <img src="../../assets/img/administration/5.png" alt="">
                            <div class="dd">
                                <div>接待情况</div>
                                <div>22次</div>
                                <div>接待次数</div>
                            </div>
                            <div class="youd">
                                <div>94.82万元</div>
                                <div>行政总支出</div>
                            </div>
                        </div>

                      </div>
                    </div>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="16">
                    <div class="grid-content bg-purple" id="te3">
                     <el-tabs v-model="activeName" type="card" @tab-click="handle2Click">
                        <el-tab-pane label="流程待办" name="first">
                           <el-table :data="dataliu1" stripe style="width: 100%;">
                                    <el-table-column prop="name"  label="" width="700" ></el-table-column>
                                    <el-table-column prop="id" label="" width="180"></el-table-column>
                                    <el-table-column prop="price" label=""></el-table-column>

                            </el-table>
                        </el-tab-pane>
                        <el-tab-pane label="已办事宜" name="se">
                           <el-table :data="dataliu2" stripe style="width: 100%;">
                                    <el-table-column prop="name"  label="" width="180" ></el-table-column>
                                    <el-table-column prop="id" label="" width="180"></el-table-column>
                                    <el-table-column prop="price" label=""></el-table-column>

                            </el-table>
                        </el-tab-pane>
                        <el-tab-pane label="办结事宜" name="fiv">
                            <el-table :data="dataliu3" stripe style="width: 100%;">
                                    <el-table-column prop="name"  label="" width="500" ></el-table-column>
                                    <el-table-column prop="id" label="" width="500"></el-table-column>
                                    <el-table-column prop="price" label=""></el-table-column>

                            </el-table>
                        </el-tab-pane>
                        <el-tab-pane label="我的请求" name="dv">
                            <el-table :data="tableData2" stripe style="width: 100%;">
                                    <el-table-column prop="name"  label="" width="180" ></el-table-column>
                                    <el-table-column prop="id" label="" width="180"></el-table-column>
                                    <el-table-column prop="price" label=""></el-table-column>
                            </el-table>
                        </el-tab-pane>
                     </el-tabs>
                    </div>
                </el-col>
                <el-col :span="8">


                        <div class="grid-content bg-purple" id="te4" style="width: 100%;">
                            <div style="display: flex;margin-left: 40px;padding-top: 20px;">
                                <span>行政风险</span>
                            </div>
                            <div class="RiskAll" style="width: 100%;">
                            <div class="RiskAll" style="width: 100%;">
                                <div class="Risk1">

                                    <img src="../../assets/img/portal/10.png" style="width: 8%;height: 8%;" alt="">
                                    <div style="margin-top: 8px;margin-left: 20px;">
                                        <div>行政预警</div>
                                        <div>当前存在行政风险</div>
                                    </div>
                                    <div style="margin-left: 200px;margin-top: 15px;color: royalblue;font-weight: bold">13</div>
                                </div>
                                <div class="Risk2">


                                    <ul class="Riskul" style="width: 100%;">
                                        <li style="width: 100%;">
                                            <span style="font-weight: bold;">来访接待提醒</span>
                                            <span style="margin-left: 290px;color: royalblue">4</span>
                                        </li>

                                        <li>上海恒岩（集团）有限公司商务专员丁林武2021-10-25来访</li>
                                        <li>上海田丰有限公司</li>
                                        <li>
                                            <span style="font-weight: bold;">项目要求变更预警</span>
                                            <span style="margin-left: 274px;color: royalblue">3</span>
                                        </li>

                                        <li>维森集团20211办公设备采购合同-外部签约方存在异常变更风险</li>

                                    </ul>
                                </div>


                            </div>
                      </div>
                    </div>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="16">
                    <div class="grid-content bg-purple" id="te5">
                      <div>
                        <span>物资跟踪</span>
                      </div>
                        <el-table :data="tableData"  :cell-style="{'text-align':'center'}" :header-cell-style="{'text-align':'center','height':'70px'}" stripe style="width: 100%;">
                            <el-table-column prop="name"  label="部门" width="180" ></el-table-column>
                                <el-table-column prop="id" label="资产总额" width="180"></el-table-column>
                                <el-table-column prop="price" label="资产数量"></el-table-column>
                                <el-table-column prop="manager" label="操作"></el-table-column>
                            </el-table>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content bg-purple" id="quan33">
                        <div style="font-size: 15px;padding-top:20px;padding-left: 20px;">部门资产领用</div>
                       <div id="zhu" ></div>
                    </div>
                </el-col>
            </el-row>
       </div>
    </div>
</template>
<script>

export default{
    data(){
        return{
            activeName: 'first',
          tableData: [
            {
                name: '合同名称',
                id: 'wsp',
                price: '2000',
                manager: '经理',
                collection: '已收款200',
                make: '已开票300',
                time: '2021-08-20',
                status: '履约中'
            },
            {
                name: '合同名称',
                id: 'wsp',
                price: '2000',
                manager: '经理',
                collection: '已收款200',
                make: '已开票300',
                time: '2021-08-20',
                status: '履约中'
            },
            {
                name: '合同名称',
                id: 'wsp',
                price: '2000',
                manager: '经理',
                collection: '已收款200',
                make: '已开票300',
                time: '2021-08-20',
                status: '履约中'
            },
            {
                name: '合同名称',
                id: 'wsp',
                price: '2000',
                manager: '经理',
                collection: '已收款200',
                make: '已开票300',
                time: '2021-08-20',
                status: '履约中'
            },
          ],
          dataliu1:[
            {
              name: '合同付款申请流程-张帅扬-2019-12-12(未付款金额(转台账):-756250,已付款金额(转台账):876250)',
              id: '1254646',
              price: '200000',

            },
            {
               name: '合同付款申请流程-张帅扬-2019-12-12(未付款金额(转台账):-756250,已付款金额(转台账):876250)',
              id: '464848487897',
              price: '233110',

            },
            {
               name: '合同付款申请流程-张帅扬-2019-12-12(未付款金额(转台账):-756250,已付款金额(转台账):876250)',
              id: '464848487897',
              price: '233110',

            },
            {
               name: '合同付款申请流程-张帅扬-2019-12-12(未付款金额(转台账):-756250,已付款金额(转台账):876250)',
              id: '464848487897',
              price: '233110',

            },
            {
               name: '合同付款申请流程-张帅扬-2019-12-12(未付款金额(转台账):-756250,已付款金额(转台账):876250)',
              id: '464848487897',
              price: '233110',

            },
            {
               name: '合同付款申请流程-张帅扬-2019-12-12(未付款金额(转台账):-756250,已付款金额(转台账):876250)',
              id: '464848487897',
              price: '233110',

            },

          ]
        }
    },
    mounted() {
        //   location.reload(1);
        //定义要展示的数据
        let xx = ['人资部','行政部','市场部','财务部','商务部','投资部']
        let yy = ['1200','1300','1000','900','2000','1500']
        //获取定义的div的id传给$echarts.init方法，并且用一个变量接受它
        let mychart = this.$echarts.init(document.getElementById('zhu'))
        //用刚才定义的变量.setOption方法来设置图表
        mychart.setOption({
            //xAxis与yAxis是固定写法，并不代表必须是x轴或者y轴
            xAxis:{
                //类型 category 是x轴
                type: 'category',
                //x轴要展示的数据
                data: xx
            },
            yAxis:{
                //类型 value 是y轴
                type: 'value'
            },
            // label:{show:true},
            //可以隐藏或者显示你下面柱状图或者其他图
             legend: {
                orient: 'horizontal',
             },
            series:[
                {
                    //上面显示和隐藏按钮的名字
                    name: '行政门户',
                    //y轴的数据
                    data: yy,
                    //图的类型，bar是柱状图
                    type: 'bar',
                    //柱状图的宽度
                    barWidth: 30,
                    //图的颜色
                    itemStyle: {
                        color: 'red'
                    }
                }
            ]
        })



         // let bing = [{
        //     name:'人资部',
        //     value:1234
        // },{
        //     name:'行政部',
        //     value:4435
        // }]
         //从x对象中获取x的值并且返回新的数组
        // let x = this.shuju.map(item => item.x)
        // let y = this.shuju.map(item => item.y)
        // mychart.setOption({
        //     series:[{
        //         data:bing,
        //         type: 'pie'
        //     }]
        // })
    },
}
</script>
<style>
.imgtop2{
    width: 100%;
    height: 30%;
    width: 100%;
    height: 30%;
}
.licenter{
    margin-top: 30px;
}
.licenternei{
    display: flex;
}
.licenternei img{
    margin-left: 40px;
    width: 60px;
    height: 60px;
}
.youd{
    width: 100%;
    margin-right: -100px;
    width: 100%;
    margin-right: -100px;
}
.dd{
    width: 100%;
    width: 100%;
    height: 100px;
    /* margin-left: 30px;
    margin-right: 100px; */
    /* margin-left: 30px;
    margin-right: 100px; */
}
.Risk1{
    display: flex;
    margin-top: 20px;
    margin-left: 30px;
}
.Risk2 ul{
  margin-top: 40px;
}
.Riskul li{
    margin-top: 25px;
    list-style-type: square
}
#te1{
    height: 500px;
}
#te2{
    height: 500px;
}
#te3{
    height: 400px;
}
#te4{
    height: 400px;
}
#te5{
    height: 400px;
}
#zhu{
    width: 100%;
    width: 100%;
    height: 300px;
}
#quan33{
    width: 100%;
    width: 100%;
    height: 400px;
}
.el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .bg-purple-dark {
    background:  rgb(255, 255, 255);
    background:  rgb(255, 255, 255);
  }
  .bg-purple {
    background: rgb(255, 255, 255);
  }
  .bg-purple-light {
    background: #ffffff;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #ffffff;
    background-color: #ffffff;
  }
</style>
